<template>
    <div class="new">
        <div v-for="(item, index) in dataList" :key="index" class="new-item">
            <div class="user">
                <img :src="item.avatar" alt="" />
                <div class="name">
                    {{ item.nickname }}
                    <div>{{ item.createtime.slice(0, -9) }}</div>
                </div>
                <div v-if="item.type == 17" class="dianzan">给您点赞了</div>
                <div v-if="item.type == 11" class="huifu" @click="huifu(item)">
                    回复
                </div>
            </div>
            <div v-if="item.type == 11" class="text">
                {{ item.commentdata }}
            </div>

            <div class="line"></div>
            <div class="user">
                <img :src="item.topic_avatar" alt="" />
                <div class="name">
                    {{ item.topic_nickname }}
                    <div>{{ item.topic_createtime.slice(0, -9) }}</div>
                </div>
            </div>
            <div class="text">
                {{ item.topic_title }}
            </div>
        </div>

        <el-dialog title="回复" :visible.sync="fabuShow" width="700px">
            <div class="fabu">
                <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    resize="none"
                    :maxlength="300"
                    v-model="fabuTextarea"
                >
                </el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button
                    type="warning"
                    style="width: 128px"
                    :disabled="!fabuTextarea && !userInfo"
                    @click="fabu"
                >
                    确认
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import commentItem from "@/components/happlypost/commentItem.vue";

import {
    getmessage,
    addYizhanCommentSubmit,
    addYizhanCommentToCommentSubmit,
} from "@/assets/api/happlypostApi.js";

import { mapState } from "vuex";

export default {
    components: {
        commentItem,
    },
    name: "pageindex",
    props: {},
    data() {
        return {
            dataList: [],

            fabuTextarea: "",

            fabuShow: false,

            huifuItem: null,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    mounted() {
        this.getmessage();
    },
    methods: {
        async getmessage() {
            const res = await getmessage({});
            if (res.code == 1) {
                this.dataList = res.data;
            }
        },

        huifu(item) {
            this.huifuItem = item;
            this.fabuShow = true;
        },

        async fabu() {
            if (!this.fabuTextarea && !this.userInfo) {
                return;
            }
            const res = await addYizhanCommentToCommentSubmit({
                topic_id: this.huifuItem.topic_id,
                c_id: this.huifuItem.from_id,
                content: this.fabuTextarea,
                sort_id: this.huifuItem.sort_id,
            });
            if (res.code == 1) {
                this.$message({
                    message: "评论成功",
                    type: "success",
                });
                this.fabuShow = false;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.new {
}

.new-item {
    padding: 15px 25px;
    padding-right: 63px;
    background-color: #ffffff;
    margin-bottom: 18px;
    .text {
        font-weight: 350;
        font-size: 18px;
        color: #333333;
        line-height: 34px;
        padding-left: 63px;
        margin-top: 10px;
    }
    .line {
        width: 100%;
        height: 1px;
        background-color: #d8d8d8;
        margin: 25px 0;
        margin-left: 63px;
    }
    .user {
        display: flex;
        align-items: center;

        img {
            width: 55px;
            height: 55px;
            max-width: 55px;
            border-radius: 55px;
            object-fit: cover;
            margin-right: 8px;
        }
        .name {
            width: 100%;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            div {
                padding-top: 5px;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
            }
        }
        .dianzan {
            font-weight: 400;
            font-size: 20px;
            color: #fa5151;
            white-space: nowrap;
        }

        .huifu {
            width: 77px;
            height: 28px;
            background: #026beb;
            border-radius: 3px;
            font-weight: 500;
            font-size: 16px;
            color: #ffffff;
            line-height: 28px;
            text-align: center;
            cursor: pointer;
            &:hover {
                opacity: 0.9;
            }
            &:active {
                opacity: 0.8;
            }
        }
    }
}

::v-deep .el-button--warning span {
    color: #ffffff;
}
</style>
